import "./index.scss";
import Footer from "components/Footer";
import { Tabs } from "antd-mobile";
import React, { useState, useEffect } from "react";
import * as api from "api/index";

function Discover() {
  // 声明响应式变量kind(分类)
  let [kind, setKind] = useState("01");

  // 声明响应式变量 list
  let [list, setList] = useState([
    // {
    //   description: "小仙女们最爱的泳池酒店",
    //   hashid: "e9qGD4mGWo",
    //   id: 715,
    //   imageUrl: "http://static.huruqing.cn/villa/715-15390514563501.png",
    //   kind: "推荐•路线",
    //   title: "找到了！国内最受欢迎的网红泳池酒店，我带上你，你带上钱，出发吧！",
    //   url: "#/topic/detail/e9qGD4mGWo?timeStamp=1629440613638",
    // }
  ]);

  // 请求数据
  const getList = () => {
    let obj = {
      kind,
    };
    api.$discoverList(obj).then((res) => {
      // console.log(res);
      setList(res.result);
    });
  };

  const changTab = (value)=> {
    // 修改kind状态
    setKind(value);
  }

  // 调用请求数据的方法
  useEffect(() => {
    getList();
  }, [kind]);

  return (
    <div>
      {/* 导航栏 */}
      <Tabs onChange={changTab} className="bg-fff">
        <Tabs.Tab title="路线" key="01"></Tabs.Tab>
        <Tabs.Tab title="美墅" key="02"></Tabs.Tab>
        <Tabs.Tab title="活动" key="03"></Tabs.Tab>
      </Tabs>

      {/* 列表 */}
      <ul className="discover-index">
        {list.map((item) => (
          <li key={item.id} className="item lh15 pl-10 pr-10 bg-fff flex">
            <img src={item.imageUrl} alt="" />
            <p className="pt-15 pl-15 pr-15">
              最攻略 | 广东摘果地图！葡萄、百香果、无花果... 周末马上走起！
            </p>
          </li>
        ))}
      </ul>
      <Footer name="discover" />
    </div>
  );
}

export default Discover;
